<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>存取款业务 - 银行业务管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css" rel="stylesheet">
    
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .navbar-brand {
            font-weight: bold;
            color: #fff !important;
        }
        
        .main-content {
            padding: 40px 20px;
        }
        
        .service-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-bottom: 30px;
            backdrop-filter: blur(10px);
        }
        
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        
        .btn-deposit {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            border: none;
            color: white;
            padding: 12px 30px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .btn-deposit:hover {
            background: linear-gradient(135deg, #3d8bfe 0%, #00d9fe 100%);
            color: white;
            transform: translateY(-2px);
        }
        
        .btn-withdraw {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            border: none;
            color: white;
            padding: 12px 30px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .btn-withdraw:hover {
            background: linear-gradient(135deg, #ee82e9 0%, #f3455a 100%);
            color: white;
            transform: translateY(-2px);
        }
        
        .btn:disabled {
            background: #6c757d !important;
            transform: none !important;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .required {
            color: red;
        }
        
        .input-group-text {
            background-color: #667eea;
            color: white;
            border-color: #667eea;
        }
        
        .result-card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
            display: none;
            margin-top: 20px;
        }
        
        .balance-amount {
            font-size: 2rem;
            font-weight: bold;
            color: #28a745;
            margin: 15px 0;
        }
        
        .security-tips {
            background: #e3f2fd;
            border-left: 4px solid #2196f3;
            padding: 15px;
            margin-top: 20px;
            border-radius: 0 5px 5px 0;
        }
        
        .nav-tabs .nav-link.active {
            background-color: #667eea;
            border-color: #667eea;
            color: white;
        }
        
        .nav-tabs .nav-link {
            color: #667eea;
            font-weight: 600;
        }
        
        .tab-content {
            padding-top: 20px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="/customer">
                <i class="fas fa-university"></i>
                银行业务管理系统 - 客户服务
            </a>
            
            <div class="navbar-nav ml-auto">
                <a class="nav-link" href="/customer">
                    <i class="fas fa-arrow-left"></i> 返回首页
                </a>
            </div>
        </div>
    </nav>

    <div class="container main-content">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <div class="service-card">
                    <div class="text-center mb-4">
                        <h2>
                            <i class="fas fa-exchange-alt text-primary"></i>
                            存取款业务
                        </h2>
                        <p class="text-muted">请选择您要办理的业务类型</p>
                    </div>
                    
                    <!-- 业务类型选择 -->
                    <ul class="nav nav-tabs justify-content-center" id="businessTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="deposit-tab" data-toggle="tab" href="#deposit" role="tab">
                                <i class="fas fa-arrow-down"></i> 存款业务
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="withdraw-tab" data-toggle="tab" href="#withdraw" role="tab">
                                <i class="fas fa-arrow-up"></i> 取款业务
                            </a>
                        </li>
                    </ul>
                    
                    <div class="tab-content" id="businessTabContent">
                        <!-- 存款业务 -->
                        <div class="tab-pane fade show active" id="deposit" role="tabpanel">
                            <form id="depositForm" novalidate>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="depositCardId">银行卡号 <span class="required">*</span></label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-credit-card"></i>
                                                    </span>
                                                </div>
                                                <input type="text" class="form-control" id="depositCardId" name="cardId" 
                                                       required pattern="^[0-9]{16}$" placeholder="请输入16位银行卡号"
                                                       maxlength="16">
                                            </div>
                                            <div class="invalid-feedback">请输入正确的16位银行卡号</div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="depositAmount">存款金额 <span class="required">*</span></label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">¥</span>
                                                </div>
                                                <input type="number" class="form-control" id="depositAmount" name="amount" 
                                                       required min="0.01" step="0.01" placeholder="请输入存款金额">
                                            </div>
                                            <div class="invalid-feedback">存款金额必须大于0</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label for="depositRemark">备注信息</label>
                                    <input type="text" class="form-control" id="depositRemark" name="remark" 
                                           placeholder="请输入备注信息（可选）" maxlength="200">
                                </div>
                                
                                <div class="text-center">
                                    <button type="submit" class="btn btn-deposit" id="depositBtn">
                                        <i class="fas fa-arrow-down"></i>
                                        确认存款
                                    </button>
                                </div>
                            </form>
                            
                            <!-- 存款加载动画 -->
                            <div class="loading" id="depositLoading">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="sr-only">处理中...</span>
                                </div>
                                <p class="mt-2">正在处理存款业务，请稍候...</p>
                            </div>
                            
                            <!-- 存款结果 -->
                            <div class="result-card" id="depositResult">
                                <div class="mb-3">
                                    <i class="fas fa-check-circle text-success" style="font-size: 3rem;"></i>
                                    <h4 class="mt-3 text-success">存款成功</h4>
                                </div>
                                
                                <div class="row">
                                    <div class="col-6">
                                        <strong>存款金额：</strong>
                                    </div>
                                    <div class="col-6">
                                        <span class="balance-amount" id="depositedAmount">¥0.00</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <strong>账户余额：</strong>
                                    </div>
                                    <div class="col-6">
                                        <span class="balance-amount" id="newDepositBalance">¥0.00</span>
                                    </div>
                                </div>
                                
                                <div class="mt-3">
                                    <button type="button" class="btn btn-outline-primary" onclick="resetDepositForm()">
                                        <i class="fas fa-redo"></i> 继续存款
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 取款业务 -->
                        <div class="tab-pane fade" id="withdraw" role="tabpanel">
                            <form id="withdrawForm" novalidate>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="withdrawCardId">银行卡号 <span class="required">*</span></label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-credit-card"></i>
                                                    </span>
                                                </div>
                                                <input type="text" class="form-control" id="withdrawCardId" name="cardId" 
                                                       required pattern="^[0-9]{16}$" placeholder="请输入16位银行卡号"
                                                       maxlength="16">
                                            </div>
                                            <div class="invalid-feedback">请输入正确的16位银行卡号</div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="withdrawPassword">取款密码 <span class="required">*</span></label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-lock"></i>
                                                    </span>
                                                </div>
                                                <input type="password" class="form-control" id="withdrawPassword" name="password" 
                                                       required pattern="^[0-9]{6}$" placeholder="请输入6位数字密码"
                                                       maxlength="6">
                                                <div class="input-group-append">
                                                    <button type="button" class="btn btn-outline-secondary" id="toggleWithdrawPassword">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="invalid-feedback">请输入正确的6位数字密码</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="withdrawAmount">取款金额 <span class="required">*</span></label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">¥</span>
                                                </div>
                                                <input type="number" class="form-control" id="withdrawAmount" name="amount" 
                                                       required min="0.01" step="0.01" placeholder="请输入取款金额">
                                            </div>
                                            <div class="invalid-feedback">取款金额必须大于0</div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="withdrawRemark">备注信息</label>
                                            <input type="text" class="form-control" id="withdrawRemark" name="remark" 
                                                   placeholder="请输入备注信息（可选）" maxlength="200">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="text-center">
                                    <button type="submit" class="btn btn-withdraw" id="withdrawBtn">
                                        <i class="fas fa-arrow-up"></i>
                                        确认取款
                                    </button>
                                </div>
                            </form>
                            
                            <!-- 取款加载动画 -->
                            <div class="loading" id="withdrawLoading">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="sr-only">处理中...</span>
                                </div>
                                <p class="mt-2">正在处理取款业务，请稍候...</p>
                            </div>
                            
                            <!-- 取款结果 -->
                            <div class="result-card" id="withdrawResult">
                                <div class="mb-3">
                                    <i class="fas fa-check-circle text-success" style="font-size: 3rem;"></i>
                                    <h4 class="mt-3 text-success">取款成功</h4>
                                </div>
                                
                                <div class="row">
                                    <div class="col-6">
                                        <strong>取款金额：</strong>
                                    </div>
                                    <div class="col-6">
                                        <span class="balance-amount" id="withdrawnAmount">¥0.00</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <strong>账户余额：</strong>
                                    </div>
                                    <div class="col-6">
                                        <span class="balance-amount" id="newWithdrawBalance">¥0.00</span>
                                    </div>
                                </div>
                                
                                <div class="mt-3">
                                    <button type="button" class="btn btn-outline-primary" onclick="resetWithdrawForm()">
                                        <i class="fas fa-redo"></i> 继续取款
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 安全提示 -->
                    <div class="security-tips">
                        <h6><i class="fas fa-shield-alt"></i> 安全提示</h6>
                        <ul class="mb-0">
                            <li>存款业务无需密码验证，取款业务需要密码验证</li>
                            <li>请确保在安全的网络环境下进行操作</li>
                            <li>取款后账户余额不能少于1元</li>
                            <li>如发现异常情况，请立即联系客服</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        $(document).ready(function() {
            // 密码显示/隐藏切换
            $('#toggleWithdrawPassword').click(function() {
                const passwordField = $('#withdrawPassword');
                const icon = $(this).find('i');

                if (passwordField.attr('type') === 'password') {
                    passwordField.attr('type', 'text');
                    icon.removeClass('fa-eye').addClass('fa-eye-slash');
                } else {
                    passwordField.attr('type', 'password');
                    icon.removeClass('fa-eye-slash').addClass('fa-eye');
                }
            });

            // 银行卡号输入格式化
            $('#depositCardId, #withdrawCardId').on('input', function() {
                let value = $(this).val().replace(/\D/g, '');
                if (value.length > 16) {
                    value = value.substring(0, 16);
                }
                $(this).val(value);
            });

            // 密码输入格式化
            $('#withdrawPassword').on('input', function() {
                let value = $(this).val().replace(/\D/g, '');
                if (value.length > 6) {
                    value = value.substring(0, 6);
                }
                $(this).val(value);
            });

            // 存款表单提交
            $('#depositForm').on('submit', function(e) {
                e.preventDefault();

                const form = this;
                if (!form.checkValidity()) {
                    form.classList.add('was-validated');
                    return;
                }

                processDeposit();
            });

            // 取款表单提交
            $('#withdrawForm').on('submit', function(e) {
                e.preventDefault();

                const form = this;
                if (!form.checkValidity()) {
                    form.classList.add('was-validated');
                    return;
                }

                processWithdraw();
            });
        });

        // 处理存款
        function processDeposit() {
            const cardId = $('#depositCardId').val().trim();
            const amount = $('#depositAmount').val();
            const remark = $('#depositRemark').val().trim();

            // 显示加载动画
            showDepositLoading(true);
            $('#depositBtn').prop('disabled', true);

            // 发送存款请求
            $.ajax({
                url: '/customer/deposit',
                method: 'POST',
                data: {
                    cardId: cardId,
                    amount: amount,
                    remark: remark
                }
            })
            .done(function(result) {
                if (result.code === 200) {
                    // 存款成功，显示结果
                    showDepositResult(amount, result.data);
                } else {
                    // 存款失败，显示错误信息
                    showError(result.message, 'deposit');
                }
            })
            .fail(function(xhr) {
                if (xhr.status === 400) {
                    const response = xhr.responseJSON;
                    showError(response ? response.message : '请求参数错误', 'deposit');
                } else {
                    showError('网络请求失败，请检查网络连接', 'deposit');
                }
            })
            .always(function() {
                showDepositLoading(false);
                $('#depositBtn').prop('disabled', false);
            });
        }

        // 处理取款
        function processWithdraw() {
            const cardId = $('#withdrawCardId').val().trim();
            const password = $('#withdrawPassword').val().trim();
            const amount = $('#withdrawAmount').val();
            const remark = $('#withdrawRemark').val().trim();

            // 显示加载动画
            showWithdrawLoading(true);
            $('#withdrawBtn').prop('disabled', true);

            // 发送取款请求
            $.ajax({
                url: '/customer/withdraw',
                method: 'POST',
                data: {
                    cardId: cardId,
                    password: password,
                    amount: amount,
                    remark: remark
                }
            })
            .done(function(result) {
                if (result.code === 200) {
                    // 取款成功，显示结果
                    showWithdrawResult(amount, result.data);
                } else {
                    // 取款失败，显示错误信息
                    showError(result.message, 'withdraw');
                }
            })
            .fail(function(xhr) {
                if (xhr.status === 400) {
                    const response = xhr.responseJSON;
                    showError(response ? response.message : '请求参数错误', 'withdraw');
                } else {
                    showError('网络请求失败，请检查网络连接', 'withdraw');
                }
            })
            .always(function() {
                showWithdrawLoading(false);
                $('#withdrawBtn').prop('disabled', false);
            });
        }

        // 显示存款结果
        function showDepositResult(amount, newBalance) {
            $('#depositedAmount').text('¥' + formatMoney(amount));
            $('#newDepositBalance').text('¥' + formatMoney(newBalance));

            // 隐藏表单，显示结果
            $('#depositForm').fadeOut(300, function() {
                $('#depositResult').fadeIn(300);
            });
        }

        // 显示取款结果
        function showWithdrawResult(amount, newBalance) {
            $('#withdrawnAmount').text('¥' + formatMoney(amount));
            $('#newWithdrawBalance').text('¥' + formatMoney(newBalance));

            // 隐藏表单，显示结果
            $('#withdrawForm').fadeOut(300, function() {
                $('#withdrawResult').fadeIn(300);
            });
        }

        // 重置存款表单
        function resetDepositForm() {
            $('#depositResult').fadeOut(300, function() {
                $('#depositForm').fadeIn(300);
                $('#depositForm')[0].reset();
                $('#depositForm').removeClass('was-validated');
            });
        }

        // 重置取款表单
        function resetWithdrawForm() {
            $('#withdrawResult').fadeOut(300, function() {
                $('#withdrawForm').fadeIn(300);
                $('#withdrawForm')[0].reset();
                $('#withdrawForm').removeClass('was-validated');
            });
        }

        // 显示/隐藏存款加载动画
        function showDepositLoading(show) {
            if (show) {
                $('#depositForm').hide();
                $('#depositLoading').show();
            } else {
                $('#depositLoading').hide();
                $('#depositForm').show();
            }
        }

        // 显示/隐藏取款加载动画
        function showWithdrawLoading(show) {
            if (show) {
                $('#withdrawForm').hide();
                $('#withdrawLoading').show();
            } else {
                $('#withdrawLoading').hide();
                $('#withdrawForm').show();
            }
        }

        // 显示错误信息
        function showError(message, type) {
            const alertHtml = `
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle"></i>
                    ${message}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            `;

            if (type === 'deposit') {
                $('#deposit').prepend(alertHtml);
            } else {
                $('#withdraw').prepend(alertHtml);
            }

            setTimeout(function() {
                $('.alert').alert('close');
            }, 5000);
        }

        // 工具函数
        function formatMoney(amount) {
            if (amount == null || amount === '') return '0.00';
            return parseFloat(amount).toFixed(2);
        }
    </script>
</body>
</html>
